<template>
  <div class="userFeedbackList">
    <el-card shadow="hover">
      <div class="searchBox">
        <div class="oneBox">
          <el-input placeholder="请输入用户ID" v-model="userId">
            <template slot="prepend">用户ID</template>
          </el-input>

          <!-- <el-date-picker
            v-model="feedbackTimeValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker> -->

          <el-button class="btn" @click="userFeedbackBth">查找搜索</el-button>
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="create_time" label="提交时间"> </el-table-column>
        <el-table-column prop="user_id" label="用户ID"> </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column prop="type" label="建议类型">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "问题反馈" : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="describes" label="建议内容"> </el-table-column>
        <el-table-column prop="picture" label="附件">
          <template slot-scope="scope">
            <el-badge
              :value="scope.row.picture.length"
              class="item"
              type="info"
            >
              <el-image
                style="width: 80px; height: 100px"
                :src="scope.row.picture[0]"
                :preview-src-list="scope.row.picture"
              >
              </el-image>
            </el-badge>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="operation" label="操作"> </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { shUserFeedBackShList } from "@/api/AuditManagement";

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      userId: "",
      feedbackTimeValueStartDate: "",
      feedbackTimeValueEndDate: "",
      feedbackTimeValue: "",
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    shUserFeedBackShList() {
      shUserFeedBackShList({
        page: this.page,
        pageSize: this.pageSize,
        userId: "",
        startTime: "",
        endTime: "",
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //查找搜索按钮
    userFeedbackBth() {
      this.page = 1;
      shUserFeedBackShList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        startTime: this.feedbackTimeValueStartDate,
        endTime: this.feedbackTimeValueEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //分页
    getList() {
      shUserFeedBackShList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userId,
        startTime: this.feedbackTimeValueStartDate,
        endTime: this.feedbackTimeValueEndDate,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //时间
    focus(time) {
      if (!this.feedbackTimeValue) {
        this.feedbackTimeValue = [];
      }
      this.feedbackTimeValueStartDate = this.feedbackTimeValue[0];
      this.feedbackTimeValueEndDate = this.feedbackTimeValue[1];
    },
  },
  created() {
    this.shUserFeedBackShList();
  },
};
</script>

<style lang="less" scoped>
.userFeedbackList {
  margin: 30px;
  height: 100%;
  .searchBox {
    margin-bottom: 20px;
    .oneBox {
      display: flex;
      width: 50%;
      .el-input {
        margin-right: 20px;
        width: 260px;
      }
    }
  }
  /deep/ .el-table .cell {
    overflow: visible !important;
  }
}
</style>